<template>
	<div>
		<div class="ueditor">
			<script :id="id"  :defaultMsg="writeMsg" type="text/plain" ></script>
		</div>
   
	</div>
</template>

<script>
import '../../static/ueditor/ueditor.config.js'
import '../../static/ueditor/ueditor.all.js'
import '../../static/ueditor/lang/zh-cn/zh-cn.js'
//引入公式插件
import '../../static/ueditor/kityformula-plugin/addKityFormulaDialog.js'
import '../../static/ueditor/kityformula-plugin/getKfContent.js'
import '../../static/ueditor/kityformula-plugin/defaultFilterFix.js'

export default {
    name: "UEditor",
    props: {
        id: {
            type: String
        },
        config: {
            type: Object
        },
        writeMsg:{
        	type: String
        },
        
    },
    components:{},
    data() {
        return {
            editor: null,
            isinit:false,
            fillLoading:false,//提交
            fxShow:false,//方程式显示
            inputNumber:[],//输入框个数
            
            formulaDialogueVisible:false,
            fxAnswer:[],//输入公式的答案图片
            fxAnswer2:[],//输入公式的答案公式
            clickShow:false,//点击公式图标显示
            show:0,//此时弹窗是哪个
            
            superscript_bottom:'',
            superscript_top:'',
            sign_left:'',
            sign_right:'',
            fraction_fenzi:'',
            fraction_fenmu:'',
            formula:'',
            clickLoading:false,
            formulaHtml:'',
			autosave: false,//取消自动保存
            focusInputMasks:0,//获取焦点的id
            
        }
    },  
    mounted() {
        //点击工具栏添加横线调用static/ueditor/ueditor.all.js这个里面调用的
        var that = this;
        this.thisEditorObj[that.id] = that;//main.js里面定义的全局变量
		console.log(UE)
		console.log(this)
        // this.$nextTick(()=>{//避免在切换到填空题再切回来找不到dom而报offsetWidth undefined
        // 	const _this = this;
        //     this.editor = UE.delEditor(this.id);
        // 	this.editor = UE.getEditor(this.id,this.config);
        //     this.editor.addListener("ready",function(){
        //        _this.isinit=true;
        //      })
           
        // })
      
        
    },
    destoryed() {
        this.editor.destory();
    },
    methods:{
      
    },
}
</script>
<style>
	.edui-default .edui-toolbar{text-align: left;}
</style>
<style scoped>
	
  .masks{position: fixed;top:0;left:0; text-align:center;background:rgba(0,0,0,0.5);width:100%;height:100%;z-index:101}
  .formulaContent{min-height:200px;overflow-y: auto;}
  .el-dialog__body{clear:both}
  .btnGroup{float: left;text-align:left;overflow: hidden;width:99%;border: 1px solid #d4d4d4;
    background-color: #fafafa;
    background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    background-repeat: repeat-x;
     height:40px;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);}
  .btn{cursor:pointer;background: url("../../static/ueditor/kityformula-plugin/kityformula/assets/images/toolbar/btn.png") no-repeat;margin: 2px auto;width: 32px; height: 32px;display:inline-block;}
  .fraction{background-position:-45px 0px; }
  .sign{background-position:-119px 0px;}
  /* .fx{background: url("../../assets/fx.png") no-repeat;border:1px solid  #ccc;background-color:#dcd8d8;width:50px;text-align: center;border-radius:4px;margin:0 5px;} */
  /* .superscript{background: url("../../assets/superscript.png") no-repeat;border-left:1px  dotted  #333;padding-left:4px} */
  .fxContent{text-align: left;padding:10px;margin-top:30px;clear:both;}
  .fxinput,.fxinput1{width:200px;margin:4px 0;border:1px solid #d4d4d4;margin-left: 15px; height: 40px; overflow: auto; white-space: nowrap;}
  .fxinput1{display:block}
  .clickShow{position:fixed;top:0;left:0;background:rgba(0,0,0,0.2); text-align:center;width:100%;height:100%;z-index:103}
  .clickShowContent{margin-top: 15vh; width: 50%;background: #fff;}
  .clickinput {min-width:40px;width:40px;height:40px;overflow-x:scroll;-webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px dotted #BEBEBE;}
  .clickinput.superscript_top{min-width:30px;height:30px;    margin-bottom: 15px; vertical-align: text-bottom;}
  .show2{position:relative;}
  .sign_left{position:absolute;top:-1px;right:53%;min-width:30px;height:30px;}
  .signT{vertical-align: bottom;}
  .sign_right{margin-left:-40px}
  .fenmu,.fenzi{display:inline-block;}
  .line{width:50px;height:1px;display:block;background: #000;text-align: center;margin:6px auto;}
</style>